// 创建组件  component 

// 组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分

// 每个组件 能完成独立的功能的，都是独立的部分 (小巧独立可复用)

// a. React.createClass   老版本   ES5  废弃   15.0.0 
// b. React.Component  新版本   ES6   class 类  extends 继承  React.Component 父类 
// c. 无状态组件    stateLess component   函数式组件 

// 组件名首字母必须大写    任何组件都只有一个顶层标签  

// render 组件生命周期钩子函数   把虚拟DOM 读取出JS内存   然后等待渲染成真实DOM 

// 生命周期阶段  mount(载入)  update(更新) unmount(销毁)

// 自定义函数  handleClick  onClick={this.handleClick}

// 数据传递载体  组件通信  props(属性)   state(状态)

export default class CptRule extends Component{
  render(){
    return (
      <div>
        <h4> React 如何自定义组件  </h4>
        <p>组件名首字母必须大写 </p>
        <p>
        任何组件都只有一个顶层标签
        </p>
        <Menu/>
        <Nav></Nav>
        <Content></Content>
        <Swiper></Swiper>
      </div>
    )
  }
}


class Menu extends Component{
  render(){
    return (
      <div>
         <h4>menu - menu - 菜单 </h4>
         <p>
         生命周期阶段  mount(载入)  update(更新) unmount(销毁)
         </p>
      </div>
    )
  }
}

class Nav extends Component{
  render(){
    return (
      <div>
        <h2> Nav- Nav - Nav </h2>
        <p>render 组件生命周期钩子函数   把虚拟DOM 读取出JS内存   然后等待渲染成真实DOM </p>
      </div>
    )
  }
}

const Content = ()=>{
  return (
    <div>
       <h2>纯函数组件</h2>
       <p>自定义函数  handleClick  </p>
    </div>
  )
}  

function Swiper(){
  return (
    <div>
      <h2> react 组件 有2个属性 props + state </h2>
    </div>

  )
}

// const LastDemo = React.createClass({
//   render(){
//     return (
//       <h2>LastDemo - LastDemo 15.0 版本的写法 </h2>
//     )
//   }
// })